<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron text-center">
    <h1>学员信息表</h1>
    <p>1803</p>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <input type="text" id="b" class="w-75" placeholder="姓名">
        </div>
        <div class="col-md-3">
            <select  id="s" class="w-75">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="col-md-3" >
            <input type="text" id="n" class="w-75" placeholder="年龄">
        </div>
        <div class="col-md-3">
            <button id="btn" class="btn btn-primary w-75">添加</button>
        </div>
    </div>
</div>
<table class="table table-bordered mt-5">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="con">

    </tbody>
</table>

<script>
    function loadXMLDoc() {
        var xmlhttp;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = JSON.parse(xmlhttp.responseText);
                for (let i = 0; i < json.data.length; i++) {
                    var tdname = document.createElement("td");
                    tdname.innerHTML = json.data[i].studentName;
                    var tdsex = document.createElement("td");
                    tdsex.innerHTML = json.data[i].sex;
                    var tdage = document.createElement("td");
                    tdage.innerHTML = json.data[i].age;
                    var tr = document.createElement("tr");
                    tr.appendChild(tdname);
                    tr.appendChild(tdsex);
                    tr.appendChild(tdage);
                    document.querySelector("#con").appendChild(tr);
                }

            }
        };
        xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
        xmlhttp.send();
    }
    loadXMLDoc();
    document.querySelector("#btn").addEventListener('click', function () {
        var b = document.querySelector("#b").value;
        var s = document.querySelector("#s").value;
        var n = document.querySelector("#n").value;
        if(b != "" && n != "") {
            var t;
            t = new XMLHttpRequest();
            t.onreadystatechange = function () {
                if (t.readyState == 4 && t.status == 200) {
                    document.querySelector("#con").innerHTML = "";
                    loadXMLDoc();

                }
            };
            t.open("GET", "http://localhost/ajaxapi/public/index.php/index/student/addStudent?studentName=" + b + "&sex=" + s + "&age=" + n, true);
            t.send();
        }else{
            alert("不能为空");
        }

    });
</script>
</body>
</html>